<template>
	<view class="box-index">
		<u--image class="topImg" src="https://img.huanhaoba.com/o_1fevnrs45e81824m61j7s3uo1d.jpg" radius="20rpx" width="100%" height="320rpx"></u--image>
		<view class="search">
			<u-search placeholder="请输入名称" :height="70" :showAction="false" v-model="keyword"></u-search>
		</view>
		<view class="f-gameList">
			<view v-for="(item, index) in gameList" :key="index" class="gameType">
				<view class="top">
					<view class="solidLine"></view>
					<view class="title">{{ item.typeName }}</view>
				</view>
				<view class="gameList">
					<view v-for="(itemGame, gameIndex) in item.list" :key="gameIndex" class="item" @click="gameClick(itemGame)">
						<u--image class="img" src="https://cdn.uviewui.com/uview/album/1.jpg" radius="8rpx" width="220rpx" height="220rpx"></u--image>
						<view class="name">{{ itemGame.name }}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			gameList: [
				{
					typeName: '热门游戏',
					list: [
						{ name: '穿越火线穿越火线穿越火线穿越火线' },
						{ name: '地下城地下城地下城' },
						{ name: '王者荣耀' },
						{ name: '和平精英' }
					]
				},
				{
					typeName: '手游',
					list: [
						{ name: '王者荣耀' },
						{ name: '和平精英' }
					]
				},
				{
					typeName: '端游',
					list: [
						{ name: '穿越火线' },
						{ name: '地下城' }
					]
				}
			],
		};
	},
	onShow(){
		console.log('版本', uni.$u.config.v);
	},
	methods: {
		gameClick(itemGame){
			console.log('itemGame', itemGame)
			uni.navigateTo({
				url: `/pages/index/shopList`
			})
		}
	},
	onReady() {
    }
}
</script>


<style scoped lang="scss">
	.box-index{
		.topImg{
			margin: 30rpx;
		}
		.search{
			padding: 20rpx;
		}
		.f-gameList{
			min-height: 100vh;
			background-color: #f2f2f2;
			padding: 20rpx;
		}
		.gameType{
			margin: 20rpx 0;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 4rpx;
			.top{
				display: flex;
				align-items: center;
				.solidLine{
					width: 10rpx;
					height: 44rpx;
					border-radius: 4rpx;
					background-color: #1890ff;
				}
				.title{
					margin-left: 20rpx;
					font-size: 40rpx;
					font-weight: 700;
				}
			}
			.gameList{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					margin-bottom: 20rpx;
					padding: 20rpx 30rpx;
					width: 200rpx;
					.img{
						margin-bottom: 10rpx;
					}
					.name{
						text-align: center;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}
		}
		.gameList{
			margin-top: 60rpx;
		}
	}
</style>
